<template>
<ScalablePage>
  <!-- 加药间  jyj -->
  <div class="left">
    <h2><img src="../assets/psj/gy.png" style="width:100%" /></h2>
    <div class="psj-p psj-txt">
     <p> 加药间主要是用于向工艺系统投加所需的化学药剂。加药间药剂有聚丙烯酰胺(PAM)固体颗粒、液体聚合氯化铝(PAC)、高锰酸钾(KMnO4)三种药剂。加药间设计规模按20.0万m3/d。PAC共前、后两个加药流程，其中前加药点共设3处，分别位于高效絮凝沉淀池的3座反应池处，后加药共设2处，分别位于高效絮凝沉淀池2根DN1200出水管处。
      </p>
    </div>
    <h1><img src="../assets/psj/jcsj.png"  style="width:100%;margin-top:6px" /></h1>
    <h2><img src="../assets/psj/jyjt2.png" style="margin-top: 6px" /></h2>
    <div class="psj-con">
      <!-- <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">
            {{ psj.yi }} <sub><span class="pjs-sub">L/t</span> </sub>
          </div>
          <p class="psj-p">溶液药耗</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">
            {{ psj.er }} <sub><span class="pjs-sub">mg/L</span> </sub>
          </div>
          <p class="psj-p">固体药耗</p>
        </div>
      </div> -->
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.a }} <span class="pjs-sub">L/h</span></div>
          <p class="psj-p">PAC加药流量沉淀池A池</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.b }} <span class="pjs-sub">L/h</span></div>
          <p class="psj-p">PAC加药流量沉淀池B池</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.c }} <span class="pjs-sub">L/h</span></div>
          <p class="psj-p">PAC加药流量沉淀池C池</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.d }} <span class="pjs-sub">L/h</span></div>
          <p class="psj-p">PAC加药流量后加药</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.pa }} <span class="pjs-sub">HZ</span></div>
          <p class="psj-p">加药计量泵频率P41A</p>
        </div>
      </div>


      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.pb }} <span class="pjs-sub">HZ</span></div>
          <p class="psj-p">加药计量泵频率P41B</p>
        </div>
      </div>

      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.pc }} <span class="pjs-sub">HZ</span></div>
          <p class="psj-p">加药计量泵频率P41C</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.pd }} <span class="pjs-sub">HZ</span></div>
          <p class="psj-p">加药计量泵频率P41D</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.pe }} <span class="pjs-sub">HZ</span></div>
          <p class="psj-p">加药计量泵频率P41E</p>
        </div>
      </div>

      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.ca }} <span class="pjs-sub">%</span></div>
          <p class="psj-p">加药计量泵冲程P41A</p>
        </div>
      </div>

      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.cb }} <span class="pjs-sub">%</span></div>
          <p class="psj-p">加药计量泵冲程P41B</p>
        </div>
      </div>

      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.cc }} <span class="pjs-sub">%</span></div>
          <p class="psj-p">加药计量泵冲程P41C</p>
        </div>
      </div>

      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.cd }} <span class="pjs-sub">%</span></div>
          <p class="psj-p">加药计量泵冲程P41D</p>
        </div>
      </div>

      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">{{ psj.ce }} <span class="pjs-sub">%</span></div>
          <p class="psj-p">加药计量泵冲程P41E</p>
        </div>
      </div>
      <!--  -->
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">加药计量泵P41A：累计投加量</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">加药计量泵P41B：累计投加量</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">加药计量泵P41C：累计投加量</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">加药计量泵P41D：累计投加量</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">加药计量泵P41E：累计投加量</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">储液池A液位</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">储液池B液位</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">溶液池A液位</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">-<span class="pjs-sub">-</span></div>
          <p class="psj-p">溶液池B液位</p>
        </div>
      </div>
    </div>
  

    <!-- <div class="pjs-item" style="margin-top: 20px">
      <div class="psj-pic"></div>
      <div class="psj-pic"></div>
    </div> -->
  </div>
</ScalablePage>
</template>
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue"; 
import { ref, onMounted, reactive, toRefs } from "vue";
import { waterApi } from "@/utils/shuiwu/api";

const state = reactive({
  psj: {
    a: 0,
    b: 0,
    c: 0,
    d:0,
    pa: 0,
    pb: 0,
    pc:0,
    pd:0,
    pe:0,
    ca:0,
    cb:0,
    cc:0,
    cd:0,
    ce:0
  },
});

let { psj } = toRefs(state);

onMounted(() => {
  getPsj(626);
});

function getPsj(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4215) {
        state.psj.a = Number(arr[i].value);
      }
      if (arr[i].modelId == 4216) {
        state.psj.b = Number(arr[i].value);
      }
      if (arr[i].modelId == 4217) {
        state.psj.c = Number(arr[i].value);
      }
      if (arr[i].modelId == 4218) {
        state.psj.d = Number(arr[i].value);
      }
      if (arr[i].modelId == 4231) {
        state.psj.pa = Number(arr[i].value);
      }
      if (arr[i].modelId == 4233) {
        state.psj.pb = Number(arr[i].value);
      }
      if (arr[i].modelId == 4235) {
        state.psj.pc = Number(arr[i].value);
      }
      if (arr[i].modelId == 4237) {
        state.psj.pd = Number(arr[i].value);
      }
      if (arr[i].modelId == 4219) {
        state.psj.pe = Number(arr[i].value);
      }
      if (arr[i].modelId == 4232) {
        state.psj.ca = Number(arr[i].value);
      }
      if (arr[i].modelId == 4234) {
        state.psj.cb = Number(arr[i].value);
      }
      if (arr[i].modelId == 4236) {
        state.psj.cc = Number(arr[i].value);
      }
      if (arr[i].modelId == 4238) {
        state.psj.cd = Number(arr[i].value);
      }
      if (arr[i].modelId == 4220) {
        state.psj.ce = Number(arr[i].value);
      }
    }
  });
}
</script>
<style scoped>
.psj-p{
  font-size:14px;
}
.pjs-item{
  margin-bottom: 1px;
}
.pjs-item >  img{
    width: 62px;
  }
</style>
